import {createApp, h, render} from "vue";
import CdlPopup from "@/components/popup/index"
import type {Component, VNode} from "@vue/runtime-core";
import {Mode} from "@/interfaces/components/Page";
import {Control} from "@/interfaces/components/Table";
import {directive} from "@/utils/directive";

/**
 * 创建弹出层Popup
 * @param ti        标题
 * @param vNode     内容
 * @param mod       回调的模式
 * @param callFun   回调
 * @param controls   控制
 */
export function createPopup(ti: string, vNode: VNode | Component, mod?: Mode
                            , callFun?: (mod: Mode, data: any)=> void
                            , controls?: Control[]){
    console.log("创建Popup弹出层。。。")
    let div: HTMLDivElement = document.createElement("div")
    div.setAttribute("id", "cdl_popup")
    div.style.cssText = "position: absolute; z-index: 999; width: 100%; height: 100%; top: 0"
    document.body.appendChild(div)

    const popup = h(CdlPopup, {
        title: ti,
        vNode: vNode,
        controls: controls,
        mod: mod as "add" | "update",
        callFun: callFun,
        onDestroyPopup: destroyPopup
    })
    render(popup, div)
    // const popup = createApp(CdlPopup, {
    //     title: ti,
    //     vNode: vNode,
    //     controls: controls,
    //     callFun: callFun,
    //     mod: mod
    // })
    // directive(popup)
    // popup.provide("destroyPopup", destroyPopup)
    // popup.mount("#cdl_popup")
    //
    function destroyPopup(){
        render(null, div)
        div.remove()
    }
}
